import React, { useEffect, useState,useRef } from "react";
import LlxForm from 'components/LlxForm/index'
import { Form,Tooltip,Select,Modal,Cascader,Tag,Button} from 'antd';
import {findSubject,getSubjectById} from 'api/index'
import LlxTable from '../LlxTable'
import PreviewSubject from "components/LlxPreview/subject";
import classNames from "classnames";
const { SHOW_CHILD } = Cascader;

const getValue = (value) => {
  switch (value) {
    case 1:
      return '听音选文'
    case 2:
      return '听音选图'
    case 3:
      return '看文选文'
    case 4:
      return '看文选图'
    case 5:
      return '看图选文'
    case 6:
      return '看图跟读'
    case 7:
      return '看文跟读'
    case 8:
      return '听音跟读'
    case 9:
      return '看文选音'
    case 10:
      return '听音选音'
    default:
      return
  }
}
const getTypeValue = (value) => {
  switch (value) {
    case 1:
      return '单选题'
    case 2:
      return '判断题'
    case 3:
      return '组合题'
    case 4:
      return '排序题'
    case 5:
      return '连线题'
    case 6:
      return '识读题'
    case 7:
      return '看图拼词'
    default:
        return
  }
}


const Words = (props) => {
      
      const {isModalVisible, setIsModalVisible,dictionaries,importData,userName,globalOriginType=''} = props

  const [form] = Form.useForm();
//选择数据
const [selectedRowKeys,setselectedRowKeys] = useState([])
const rowSelection  = useRef({
  selectedRowKeys: selectedRowKeys,
  onChange: value => {
  setselectedRowKeys(value)
  rowSelection.current.selectedRowKeys = value
  }
})
  //分页数据
const [pagination,setPagination] = useState({
  current:1,
  pageSize:10
})
//初始表格数据
const [total,setTotal] = useState(0) //总数量
const [dataSource,setDataSource] = useState([])
const [loading,setLoading] = useState(false) //加载
const [subjectItem,setSubjectItem] = useState({})
const [isModalVisiblePreview, setIsModalVisiblePreview] = useState(false)

  const formItem = [
    {label: '考点',type:'input', name: 'examination', span: 8 },
    {label: '考点种类', name: 'examinationTypeId' , span: 8 ,render: () => {
      return <Cascader  maxTagCount="responsive" showCheckedStrategy={SHOW_CHILD} fieldNames={{value:'id',label:'dictValue'}} options={dictionaries.SubjectType} multiple placeholder="请选择种类" />
  }},
    {label: '题型', name: 'type', span: 8 ,render: () => {
      return <Select
      allowClear
      optionFilterProp="dictValue"
      showSearch
      fieldNames={{value:'id',label:'dictValue'}}
      placeholder={'请选择题型'}
      options={dictionaries.QuestionType}
    >
    </Select>
  }},
  {label: '题目形式', name: 'subjectType', span: 8 ,render: () => {
    return <Select
    allowClear
    optionFilterProp="dictValue"
    showSearch
    fieldNames={{value:'id',label:'dictValue'}}
    placeholder={'请选择题目形式'}
    options={dictionaries.QuestionCategory}
  >
  </Select>
  }},
  ]
  
  const columns = [
    {title: '种类 + 考点',width:210, dataIndex: 'examination', key: 'examination', align: 'center',render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
       {
         record.examinationName?.map((i,j)=>{
           return <p key={i.examinationTypedName}>{j+1}.{i.examinationTypedName} + {i.examination}</p>
         })
       }
     </div>
   }},
    {title: '题型', dataIndex: 'type', key: 'type', align: 'center',render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
        {getTypeValue(text)}
     </div>
   }},
    {title: '来源', dataIndex: 'globalOriginTypeName', key: 'globalOriginTypeName', align: 'center'},
    {title: '题目形式', dataIndex: 'subjectType', key: 'subjectType', align: 'center',render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
        {getValue(text)}
     </div>
   }},
    {title: '标签', dataIndex: 'labels', key: 'labels',width:180, align: 'center', render: (text, record) => {
      return <div className="operate_link_group text-nowrap">
       {record.labels?.map((i,j)=>{
         return   <Tooltip key={i.id} placement="top" title={text.map(i=>i.labelName).join(' ')}>
          {
            j<3?<Tag key={i.id} color="green">{i.labelName}</Tag>:''
          }
           </Tooltip>
       })}
     </div>
   }},
   {title: '创建人', dataIndex: 'createBy', key: 'createBy', align: 'center',render: (text, record) => {
    return <div className={classNames(userName===text?'operate_link_group text-nowrap text-color-red':"operate_link_group text-nowrap")}>
      {text}
   </div>
 }},
 {title: '预览', dataIndex: 'active', key: 'active', align: 'center',render: (text, record) => {
  return <div className='text-link' onClick={()=>preview(record)}>
    预览
 </div>
}}
]

useEffect(()=>{
  getNewList()
},[])// eslint-disable-line react-hooks/exhaustive-deps

  // 1.获取数据
  const getNewList = async(value) => {
    setLoading(true)

    const {
      createBy,
      subjectType,
      examination,
      examinationTypeId,
      type,
    } = form.getFieldValue()

    const params ={
      currPage:value&&value.pageSize?value.current:pagination.current,
      pageSize:value&&value.pageSize?value.pageSize:pagination.pageSize,
      createBy,
      subjectType,
      examination,
      examinationTypeId:examinationTypeId?.map(i=>i[i.length-1]),
      type,
      globalOriginType:globalOriginType,
      globalType:4
    }

    const res = await findSubject(params)
    const data = res.result.records || []
    data.forEach((i,y)=>{
      i.sort =value&&value.pageSize?value.pageSize * (value.current - 1) + y + 1:pagination.pageSize * (pagination.current - 1) + y + 1
    })
    
    setDataSource(data)
    setTotal(res.result.total)
    setLoading(false)
  }
  //2.确认  
  const handleOk = async () => {
    importData(selectedRowKeys)
  }
  //3.取消
  const handleCancel = () => {
    form.resetFields()
    setIsModalVisible(false);
  };
  // 5.预览题目
  const preview = async (value) => {

    setSubjectItem(value.id)
    setIsModalVisiblePreview(true)
  }
  return   <Modal  wrapClassName="modal-footer" onCancel={handleCancel} width={950} footer={null} title="导入题库题目" visible={isModalVisible}>

     <LlxForm form={form} labelCol={8} formItem={formItem} />

     <Button onClick={getNewList} type={'primary'} size={'small'}>查询</Button>&nbsp;&nbsp;&nbsp;&nbsp;
     <Button onClick={handleOk} type={'primary'} size={'small'} disabled={!selectedRowKeys.length}>确认导入</Button>
   
      {/* 表格 */}
     <LlxTable
      loading={loading} 
      pagination={pagination}
      setPagination={setPagination}
      selectedRowShow={true}
      rowSelection={rowSelection.current}
      height={450}
      total={total}
      getNewList={getNewList}
      columns={columns}
      dataSource={dataSource}/>


    <PreviewSubject  id={subjectItem} isModalVisible={isModalVisiblePreview} setIsModalVisible={setIsModalVisiblePreview}></PreviewSubject>
       
   </Modal>

}
export default Words